<template>
	<div class="footer">
		<ul>
			<!-- <li @click="showComponent('home')">首页</li>
			<li @click="showComponent('news')">新闻</li>
			<li @click="this.$parent.change('life')">生活</li> -->
			<router-link to="/home" tag="li" active-class="myactive" exact="">首页</router-link>
			<router-link to="/news" tag="li" active-class="myactive" exact="">新闻</router-link>
			<router-link to="/life" tag="li" active-class="myactive" exact="">生活</router-link>
		</ul>
	</div>
</template>

// <script>
// 	export default{
// 		methods:{
// 			showComponent(v){
// 				this.$parent.change(v)
// 			}
// 			/* showHome(){
// 				this.$parent.change('home')
// 			},
// 			showNews(){
// 				this.$parent.change('news')
// 			},
// 			showLife(){
// 				this.$parent.change('life')
// 			} */
// 		}
// 	}
// </script>

<style>
	.footer{
		position: absolute;
		bottom: 0;
		height: 50px;
		background: gray;
		width: 1000px;
		
	}
	.footer ul{
		padding: 0px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		list-style-type: none;
	}
	.footer ul li{
		cursor: pointer;
	}
	.myactive{
		color: red;
	}
</style>
